<template>
    <el-form ref="ruleFormRef" label-position="top" :model="importForm" :rules="formRules" label-width="auto"
        v-loading="isLoading">
        <el-row :gutter="30">
            <re-col :value='24' :xs='24' :sm='24'>
                <el-form-item prop='file'>
                    <el-upload class="upload-demo" drag action="" :auto-upload="false" multiple :limit="1"
                        :style="{ width: '100%' }" :on-change="handleChange" v-model:file-list="uploadFiles">
                        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                        <div class="el-upload__text">
                            拖拽文件或者<em>点击文件</em>上传
                        </div>
                        <template #tip>
                            <div class="el-upload__tip">
                                <!-- jpg/png files with a size less than 500kb -->
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
            </re-col>
            <re-col :value='12' :xs='12' :sm='24'>
                <el-form-item :label='titles?.unityId' prop='unityId'>
					<el-tree-select v-model='importForm.unityId' v-bind="$attrs" :data="datas" :props="propss"
						:render-after-expand="false" check-strictly :placeholder='prompt?.unityId'
						@change="treeChange" />
				</el-form-item>
            </re-col>
            <re-col :value='12' :xs='12' :sm='24'>
                <el-form-item :label='titles?.userId' prop='userId'>
					<el-select clearable v-model="importForm.userId" :placeholder='prompt?.userId' style="width: 100%"
						filterable remote :remote-method="remoteMethod" :loading="loading" remote-show-suffix>
						<el-option v-for="item in options" :key="item.id" :label="item.nickname" :value="item.id" />
					</el-select>
				</el-form-item>
            </re-col>
            <re-col :value='12' :xs='12' :sm='24'>
                <el-form-item :label='titles?.familyId' prop='familyId'>
					<!-- <familySelect v-model='formInline.familyId' clearable :placeholder='prompt?.familyId'
						:style='{ width: "100%" }'>

					</familySelect> -->
					<el-select v-model="importForm.familyId" clearable filterable  
						 placeholder="请选择家庭" style="width: 100%" @change="familychange">
						<el-option v-for="item in familyoptions" :key="item.id" :label="item.familyName"
							:value="item.id" />
					</el-select>
				</el-form-item>
            </re-col>
            <re-col :value='12' :xs='12' :sm='24'>
                <el-form-item :label='titles?.roomId' prop='roomId'>
					<el-select v-model="importForm.roomId"  clearable filterable  
						 placeholder="请选择房间" style="width: 100%" >
						<el-option v-for="item in roomoptions" :key="item.id" :label="item.roomName"
							:value="item.id" />
					</el-select>
					
				</el-form-item>
            </re-col>
            <re-col :value='12' :xs='12' :sm='24'>
				<el-form-item :label='titles?.noticeStatus' prop='noticeStatus'>

					<el-switch  v-model="importForm.noticeStatus" :active-value="1"
						:inactive-value="2" />
				</el-form-item>
			</re-col>
        </el-row>
    </el-form>
</template>
<script lang="ts" setup>
import { UploadFilled } from '@element-plus/icons-vue';
import ReCol from "@/components/ReCol";
import { getUnitTree } from '@/api/manage/units-manager/units-manager/index';
import { getIndivduaiSelectList } from '@/api/manage/Individual-management/Individual-users/index';
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import { usePageVariablesStoreHook } from '@/store/modules/pageVariables'
import { getFamilySelectList,getRoomSelectList} from '@/api/manage/Individual-management/Individual-management/index.ts';
const datas = ref([]);
const propss = {
	label: 'unityName',
	value: 'id',
	children: 'childs',
}
type FormProps = {
    importForm: any,
    isLoading: false
}
const list = ref([])
const options = ref([])
const loading = ref(false)
const familyoptions= ref([])
const roomoptions = ref([])
const props = withDefaults(defineProps<FormProps>(), {
    importForm: {
        file: null,
        operator: null,
        canal: null,
    },
    isLoading: false
});

const ruleFormRef = ref();
const formRules = reactive(<FormRules>{
   
    unityId: [{ required: true, message: prompt?.unityId, trigger: 'blur' },],
    userId: [{ required: true, message: prompt?.userId, trigger: 'blur' },],
    familyId: [{ required: true, message: prompt?.familyId, trigger: 'blur' },],
    roomId: [{ required: true, message: prompt?.roomId, trigger: 'blur' },],
});
const uploadFiles = ref<any>([])
const handleChange = (uploadFile, uploadFiles) => {
    props.importForm.file = uploadFile.raw
}

getUnitTree({ unityId: usePageVariablesStoreHook().getManage()?.unityId }).then(res => {
	datas.value.push(...res.result.data)
})
const treeChange = (e) => {
	// console.log("foofh", e);
	props.importForm.userId = ''
    props.importForm.familyId = ''
    props.importForm.roomId = ''
	getIndivduaiSelectList({
		unityId: e
	}).then(res => {
		list.value = res.result.users
		options.value = list.value
	})
}
const remoteMethod = (query) => {
	if (query) {
		loading.value = true
		setTimeout(() => {
			loading.value = false
			options.value = list.value.filter((item) => {
				return item.familyName.includes(query)
			})
		}, 100)
	} else {
		options.value = list.value
	}
}

//监听个体用户获取家庭下拉框
watch(() => props.importForm.userId, (val) => {
	if(props.importForm.userId !== null && props.importForm.userId !== '' && props.importForm.userId !==undefined){
		getFamilySelectList({ userId: props.importForm.userId}).then(res => {
        // list.value = res.result.data
        familyoptions.value = res.result.data
  props.importForm.familyId = ''
    props.importForm.roomId = ''
		

		
    })
	}

}, {
    deep: true,
    immediate: true
})
//监听家庭获取房间号
watch(() => props.importForm.familyId, (val) => {
	if(props.importForm.familyId !== null && props.importForm.familyId !== '' && props.importForm.familyId !==undefined){
		getRoomSelectList({ familyId: props.importForm.familyId}).then(res => {
		    roomoptions.value = res.result.data
            props.importForm.roomId = ''
    })
	}

}, {
    deep: true,
    immediate: true
})
//家庭下拉框change
const familychange = (e) => {
	
}
function getRef() {
    return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
<style lang="scss" scoped></style>
